<script setup lang="ts">
import { usePlayerStore } from '@/stores/playerStore'
import { useFavoriteStore } from '@/stores/favoriteStore'
import Scroll from '@/components/scroll/index.vue'
import Confirm from '@/components/confirm/index.vue'
interface IProps {
  showPlayList: boolean
}
const playerStore = usePlayerStore()
const favoriteStore = useFavoriteStore()
const props = defineProps<IProps>()
const emits = defineEmits<{
  (event: 'update:show-play-list', visible: boolean): void
  (event: 'slide-to'): void
}>()
const scrollRef = ref<InstanceType<typeof Scroll> | null>(null)
const confirmRef = ref<InstanceType<typeof Confirm> | null>(null)
const songItemRef = ref<HTMLLIElement[] | null>(null)
const currentSong = computed<ISongItem | undefined>(() => {
  return playerStore.playlist[playerStore.currentIndex]
})
watch(
  () => props.showPlayList,
  async (newValue) => {
    await nextTick()
    newValue && scrollRef.value?.refresh()
    scrollToEle()
  }
)
watch(currentSong, async (newSong: ISongItem | undefined) => {
  if (!newSong) {
    return
  }
  await nextTick()
  scrollToEle()
})
function playMusic(song: ISongItem) {
  playerStore.currentIndex = playerStore.playlist.findIndex(
    (item: ISongItem) => item.id === song.id
  )
}
function scrollToEle() {
  const index = playerStore.sequenceList.findIndex(
    (item: ISongItem) => item.id === currentSong.value?.id
  )
  if (index < 0) {
    return
  }
  scrollRef.value?.scrollToElement(
    document.querySelectorAll('.playlist .song-item')?.[index] as HTMLElement
  )
}
// 清空按钮点击事件
function confirmClear() {
  emits('update:show-play-list', false)
  playerStore.clearPlayList()
}
function removeSong(song: ISongItem) {
  playerStore.removeSong(song)
  emits('slide-to')
}
</script>
<template>
  <transition name="list-fade">
    <div
      v-show="props.showPlayList"
      class="playlist"
      @click="emits('update:show-play-list', false)"
    >
      <div class="playlist-content" @click.stop>
        <header class="header">
          <span class="icon-wrapper" @click.stop="playerStore.setPlayMode">
            <i :class="`iconfont ${playerStore.playModeIcon}`" />
          </span>
          <span class="play-mode-text">{{ playerStore.playModeText }}</span>
          <i class="iconfont icon-clear" @click="confirmRef?.show()" />
        </header>
        <scroll ref="scrollRef" :height="300" :bounce="false" style="overflow: hidden">
          <transition-group name="list" tag="ul">
            <li
              v-for="song in playerStore.sequenceList"
              ref="songItemRef"
              :key="song.id"
              class="song-item"
              @click.stop="playMusic(song)"
            >
              <span class="current-song"
                ><i class="iconfont" :class="currentSong?.id === song.id ? 'icon-play' : ''"
              /></span>
              <span
                class="song-name"
                :class="playerStore.currentSong?.id === song.id ? 'current' : ''"
              >
                <span class="text">{{ song.name }}</span>
                <span v-if="song.alia.length > 0" class="alias">({{ song.alia[0] }})</span>
                <span class="separator">-</span>
                <span class="singer-name">{{ song.ar.map((item) => item.name).join('/') }}</span>
              </span>

              <i
                class="iconfont"
                :class="favoriteStore.favoriteIcon(song)"
                :style="favoriteStore.favoriteColor(song, '#d93f30')"
                @click.stop="favoriteStore.toggleFavorite(song)"
              />
              <i
                class="iconfont icon-close"
                style="margin-left: 10px"
                @click.stop="removeSong(song)"
              />
            </li>
          </transition-group>
        </scroll>
        <div class="close" @click.stop="emits('update:show-play-list', false)">关闭</div>
        <confirm
          ref="confirmRef"
          text="是否清空播放列表？"
          confirm-btn-text="清空"
          @confirm="confirmClear"
        />
      </div>
    </div>
  </transition>
</template>

<style scoped lang="scss">
.playlist {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  background-color: $color-background-d;
  z-index: 200;
  &.list-fade-enter-active,
  &.list-fade-leave-active {
    transition: opacity 0.3s;
    .playlist-content {
      transition: all 0.3s;
    }
  }
  &.list-fade-enter-from,
  &.list-fade-leave-to {
    opacity: 0;
    .playlist-content {
      transform: translate3d(0, 100%, 0);
    }
  }
  .playlist-content {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: $color-highlight-background;
    width: 100%;
    z-index: 210;
    .header {
      padding: 0 8px;
      display: flex;
      align-items: center;
      height: 40px;
      .icon-wrapper {
        margin-right: 6px;
        i {
          font-size: $font-size-large-x;
          color: $color-theme;
        }
      }
      .play-mode-text {
        flex: 1;
        @include no-wrap;
      }
      .icon-clear {
        color: $color-text-d;
      }
    }
    .song-item {
      padding: 0 8px;
      display: flex;
      align-items: center;
      height: 30px;
      .current-song {
        width: 14px;
        height: 14px;
      }
      .song-name {
        padding: 0 10px;
        flex: 1;
        color: $color-text-d;
        @include no-wrap;
        font-size: $font-size-small;
        .text {
          color: #ffffff;
        }
        .separator {
          margin: 0 5px;
        }
        .alias {
          margin-left: 5px;
          color: $color-text-d;
        }
        &.current {
          color: $color-theme;
          .text {
            color: $color-theme;
          }
          .alias {
            color: $color-theme;
          }
        }
      }
      i {
        color: $color-theme;
      }
    }
    .close {
      text-align: center;
      line-height: 40px;
      background-color: $color-background;
      color: $color-text-d;
      font-size: $font-size-large;
    }
  }
}
</style>
